<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/html/common/public_header_main.jsp"%>

<link rel="stylesheet" href="${ctx_static }/home/sysconf/css/bodyPermission.css">
<link rel="stylesheet" href="${ctx_static }/dep/assets/css/metro.css">

<div class="row">
     <div class="col-sm-8">
         <div class="permission drop-down">
             <div class="widget-header role-title bordered-blue bordered-bottom-2">
                 <span class="widget-caption">角色列表</span>
             </div>
             <div class="role-list">
                 <ul id="permissionTree2" class="ztree"></ul>
                 <div class="addRole text-center">
                 	<shiro:hasPermission name="roleMenu:add">
                     <button type="button" class="btn btn-info disabled" data-toggle="modal"
                             data-backdrop="static" data-target="#addRole">
                         新增角色 <i class="fa fa-plus-square-o"></i>
                     </button>
                     </shiro:hasPermission>
                 </div>
                 <div class="tables">
                     <table id="roleTable" class="table table-striped table-hover table-bordered dataTable no-footer">
                     	<thead>
	                     	<tr>
	                            <th>职位名称</th>
	                            <th>角色名称</th>
	                            <th>状态</th>
	                            <th>操作</th>
	                         </tr>
                     	</thead>
                         <tbody>
                         
                         </tbody>
                     </table>
                 </div>
             </div>
         </div>
     </div>
     <!--权限配置树-->
     <div class="col-sm-4" id="authorize-div" style="display: none">
         <div class="permission-config">
             <h3 class="h3 permission-title">
                 <i class="fa fa-key"></i>
                 <span class="menu-text pn-title">权限配置树</span>
             </h3>
             <div class="permission-content">
             	 <div>角色：<span class="role-name"></span></div>
             	 <input type="hidden" class="role-id" />
                 <ul id="permissionTree" class="ztree"></ul>
                 <div class="col-md-4 col-sm-4 col-xs-4 col-xs-offset-4">
                     <button type="button" class="btn btn-info form-control save">保存
                     </button>
                 </div>
             </div>
         </div>
     </div>
 </div>


<div class="modal fade" id="addRole" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bordered-blue bordered-bottom-2">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <span class="widget-caption">新增角色</span>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal clearfix" id="roleAddForm">
                    <div class="form-group col-sm-6">
                        <label class="col-sm-3 control-label no-padding-right">岗位</label>
                        <div class="col-sm-9">
                        	<input type="hidden" name="dutyId"/>
                            <input type="text" class="form-control station" readonly>
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label class="col-sm-3 control-label no-padding-right">角色</label>
                        <div class="col-sm-9">
                            <input name="fullName" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label class="col-sm-3 control-label no-padding-right">编码</label>
                        <div class="col-sm-9">
                            <input name="code" class="form-control" type="text">
                        </div>
                    </div>
                    <hr class="wide ">
                    <div class="col-sm-12 custom">
                        <span class="custom-title">自定义设置</span>
                        <hr class="wide margin-bottom-20">
                        <div class="custom-content col-sm-12">
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">项目</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select class="form-control project selectpicker" multiple
                                            title="01人力资源管理师">
                                        <option value="0">01人力资源管理师</option>
                                        <option value="1">02公共营养师</option>
                                        <option value="2">03学历</option>
                                        <option value="3">04采购师</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">品牌</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select  class="form-control brand selectpicker" multiple title="智联">
                                        <option value="0">智联</option>
                                        <option value="1">联想</option>
                                        <option value="2">中和</option>
                                        <option value="3">远大</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">部门</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select  class="form-control department selectpicker" multiple
                                            title="总裁办">
                                        <option value="0">总裁办</option>
                                        <option value="1">财务中心</option>
                                        <option value="2">销售中心</option>
                                        <option value="3">综合管理中心</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">学员状态</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select class="form-control studentStatus selectpicker"
                                            multiple title="待沟通">
                                        <option value="0">待沟通</option>
                                        <option value="1">已沟通</option>
                                        <option value="2">报名</option>
                                        <option value="3">预约</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">梯队</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select  class="form-control echelon selectpicker" multiple title="1">
                                        <option value="0">1</option>
                                        <option value="1">2</option>
                                        <option value="2">3</option>
                                        <option value="3">4</option>
                                        <option value="3">5</option>
                                        <option value="3">6</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">信息归属方</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select  class="selectpicker form-control affiliation" multiple
                                            title="01北京">
                                        <option value="0">01北京</option>
                                        <option value="1">02上海</option>
                                        <option value="2">03天津</option>
                                        <option value="3">04南京</option>
                                    </select>
                                </div>
                            </div>
                            <i class="fa fa-plus-circle blue control-label add-custom"></i>
                        </div>
                    </div>
                    <div class="form-group modal-footer col-sm-12">
                       
                        <div class="col-sm-2  col-sm-offset-4">
                            <button type="submit" class="btn btn-primary form-control">确定</button>
                        </div>
                         <div class="col-sm-2">
                            <button type="button" class="btn btn-danger form-control" data-dismiss="modal">取消
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 编辑角色 -->
<div class="modal quan-edit fade" tabindex="-1" role="dialog" id="updateRole"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bordered-blue bordered-bottom-2">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <span class="widget-caption">编辑</span>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal clearfix" id="roleUpdateForm">
                    <div class="form-group col-sm-6">
                        <label class="col-sm-3 control-label no-padding-right">职位名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control positionName" disabled>
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label class="col-sm-3 control-label no-padding-right">角色名称</label>
                        <div class="col-sm-9">
                        	<input type="hidden" name="roleId"/>
                            <input class="form-control" name="fullName" type="text">
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label class="col-sm-3 control-label no-padding-right">编码</label>
                        <div class="col-sm-9">
                            <input class="form-control" name="code" type="text">
                        </div>
                    </div>
                    <!-- <div class="form-group col-sm-6">
                        <label class="col-sm-3 control-label no-padding-right">查看范围</label>
                        <div class="col-sm-9">
                            <select name="checkRange" class="form-control checkRange">
                                <option value="0">只看自己</option>
                                <option value="1">所属部门</option>
                                <option value="2">查看全部</option>
                                <option value="3">自定义</option>
                            </select>
                        </div>
                    </div> -->
                    <hr class="wide">
                    <div class="col-sm-12 custom-edit">
                        <span class="custom-title">自定义设置</span>
                        <hr class="wide margin-bottom-20 clearfix">
                        <div class="custom-content-edit col-sm-12">
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">项目</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select name="project" class="form-control project selectpicker" multiple
                                            title="01人力资源管理师">
                                        <option value="0">01人力资源管理师</option>
                                        <option value="1">02公共营养师</option>
                                        <option value="2">03学历</option>
                                        <option value="3">04采购师</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">品牌</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select name="brand" class="form-control brand selectpicker" multiple title="智联">
                                        <option value="0">智联</option>
                                        <option value="1">联想</option>
                                        <option value="2">中和</option>
                                        <option value="3">远大</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">部门</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select name="department" class="form-control department selectpicker" multiple
                                            title="总裁办">
                                        <option value="0">总裁办</option>
                                        <option value="1">财务中心</option>
                                        <option value="2">销售中心</option>
                                        <option value="3">综合管理中心</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">学员状态</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select name="studentStatus" class="form-control studentStatus selectpicker"
                                            multiple title="待沟通">
                                        <option value="0">待沟通</option>
                                        <option value="1">已沟通</option>
                                        <option value="2">报名</option>
                                        <option value="3">预约</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">梯队</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select name="echelon" class="form-control echelon selectpicker" multiple title="1">
                                        <option value="0">1</option>
                                        <option value="1">2</option>
                                        <option value="2">3</option>
                                        <option value="3">4</option>
                                        <option value="3">5</option>
                                        <option value="3">6</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="col-sm-3 control-label no-padding-right">信息归属方</label>
                                <div class="col-sm-9 no-padding-right">
                                    <select name="affiliation" class="selectpicker form-control affiliation" multiple
                                            title="01北京">
                                        <option value="0">01北京</option>
                                        <option value="1">02上海</option>
                                        <option value="2">03天津</option>
                                        <option value="3">04南京</option>
                                    </select>
                                </div>
                            </div>
                            <i class="fa fa-plus-circle blue control-label add-custom"></i>
                        </div>
                    </div>
                    <div class="form-group modal-footer col-sm-12">
                        <div class="col-sm-2 col-sm-offset-4">
                        	<button type="submit" class="btn btn-primary form-control">确定</button>
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="btn btn-danger form-control" data-dismiss="modal">取消
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
//角色表
var DataTable = function(){
	return{
		init: function(){
			var Table = $('#roleTable').dataTable({
				"bPaginate": true,  //是否显示分页
            	//"iDisplayLength": 10,
            	"bLengthChange": true,//每页显示的记录数
            	"bFilter": false, //搜索栏
            	"bSort": true, //是否支持排序功能
            	"bInfo": true, //显示表格信息
            	"bAutoWidth": false,  //自适应宽度
            	"bStateSave": true, //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
            	//"sPaginationType": "", //分页，一共两种样式，full_numbers和two_button(默认)
            	"sAjaxSource" : ctx+'/role/load',
        		"fnServerData": retrieveData,//用于替换默认发到服务端的请求操作  
            	"bServerSide": true,
            	"bDestroy": true,
                "bRetrieve": false,
                "oLanguage" : {
        			"sLengthMenu" : "每页显示 _MENU_ 条记录",
        			"sZeroRecords" : "抱歉， 没有找到",
        			"sInfo" : "从 _START_ 到 _END_ / 共 _TOTAL_ 条数据",
        			"sInfoEmpty" : "找不到相关数据",
        			"sInfoFiltered" : "数据表中共为 _MAX_ 条记录)",
        			"sProcessing": "正在加载中...",
        			"sSearch": "搜索",
        			"oPaginate" : {
        				"sFirst" : "首页",
        				"sPrevious" : "前一页",
        				"sNext" : "后一页",
        				"sLast" : "尾页"
        			},
        		},
        		"aoColumns" : [
         			            {"mData": "sysDuty.fullName", 'sClass': "text-center"},
         			            {"mData": "fullName", 'sClass': "text-center"},
         			            {"mData": "enable", 'sClass': "text-center", "mRender":function(data, type, full ){
         			            	if(data==1){
           			          		  return '<a href="#" data-id="'+full.roleId+'" data-status="0" class="btn btn-use btn-xs status-btn"><i class="fa fa-check-square-o"></i> 启用</a>';
               			          	}else{
               			              return '<a href="#" data-id="'+full.roleId+'" data-status="1" class="btn btn-nouse btn-xs status-btn"><i class="fa fa-ban"></i> 禁用</a>';
               			          	}
         			            }},
         			            {"mData": "roleId", 'sClass': "text-center","bSortable": false,"mRender":function(data, type, full ){
         			                return '<shiro:hasPermission name="roleMenu:edit"><a href="#" data-code="'+full.code+'" data-id="'+data+'" data-role="'+full.fullName+'" data-duty="'+full.sysDuty.fullName+'" data-dutyid="'+full.sysDuty.dutyId+'" class="btn btn-info btn-xs role-edit" data-backdrop="static" '+(full.enable == 0 ? "disabled" : "")+'><i class="fa fa-edit"></i> 编辑</a></shiro:hasPermission>'+
         			                '<a href="#" data-id="'+data+'" data-role="'+full.fullName+'"  class="btn btn-info btn-xs authorize" ><i class="fa fa-edit"></i> 权限授予</a>';
         			            }}
         			        ],
         			       "aoColumnDefs": [{
          		   	            sDefaultContent: '',
          		   	            aTargets: ['_all']
          		   	        }],
			})
		}
	}
}();
</script>

<script src="${ctx_static }/dep/assets/js/jquery.ztree.all-3.5.min.js"></script>
<script src="${ctx_static }/home/sysconf/js/bodyPermission.js"></script>
